import React, { Suspense, lazy } from "react";
import { Routes, Route , Navigate,useLocation} from "react-router-dom";
import HomeIndex from "./view/HomeIndex";
import Order from "./pages/Order"
import Address from "./pages/Address";
import OrderList from "./pages/OrderList";
import Beshop from "./pages/Beshop";
const Home = lazy(() => import(/* webpackChunkName: 'home' */ "./pages/Home"));
const Visit = lazy(() => import(/* webpackChunkName: 'about' */"./pages/Visit"));
const Login = lazy(() => import(/* webpackChunkName: 'login' */"./pages/Login"));
const Store = lazy(() => import(/* webpackChunkName: 'store' */"./pages/Store"));
const FoodsList = lazy(() => import(/* webpackChunkName: 'foodsList',webpackPreload:true */"./view/FoodsList"))
const Settle = lazy(() => import(/* webpackChunkName: 'settle',webpackPrefetch: true */"./pages/Settle"));
const StoreMessage = lazy(() => import(/* webpackChunkName: 'storeMessage',webpackPrefetch: true */"./view/Store/Message"));
const StoreManage = lazy(() => import(/* webpackChunkName: 'storeManage',webpackPrefetch: true */"./view/Store/Manage"))
const StoreApply = lazy(() => import(/* webpackChunkName: 'storeApply' ,webpackPrefetch: true*/"./view/Store/Apply"))
const StoreItem = lazy(() => import(/* webpackChunkName: 'storeitem' ,webpackPrefetch: true*/'./view/Store/StoreItem'))
const StoreInfo = lazy(() => import(/* webpackChunkName: 'storeinfo' ,webpackPrefetch: true*/'./view/Store/StoreInfo'))
const StoreGoods = lazy(() => import(/* webpackChunkName: 'storegoods' ,webpackPrefetch: true*/'./view/Store/StoreGoods'))
function App() {
  const location = useLocation()
  const storeid= location.pathname.split('/')[2]
  return (
    <Suspense fallback={<div>loading...</div>}>
      <Routes>
        <Route path="/visit" element={<Visit />} />
        <Route path="/home" element={<Home />}>
          <Route path="/home" exact element={<HomeIndex />} />
          <Route path="/home/:storeId" element={<FoodsList />} />
          <Route path="/home/address" element={<Address/>}/>
          <Route path="/home/orderlist" element={<OrderList/>}/>
        </Route>
        <Route path="/login" element={<Login />} />
        <Route path="/beshop" element={<Beshop/>}/>
        <Route path="/store" element={<Store />}>
          <Route path="/store/manage" element={<StoreManage />} />
          <Route path="/store/apply" element={<StoreApply />} />
          <Route path="/store/:id" element={<StoreItem />}>
            <Route path="/store/:id/info" element={<StoreInfo />} />
            <Route path="/store/:id/goods" element={<StoreGoods />} />
            <Route path="/store/:id/order" element={<StoreMessage />} />
            <Route exact path="/store/:id" element={<Navigate to={`/store/${storeid}/goods`}/>}/>
          </Route>
          <Route exact path="/store" element={<Navigate to={'/store/manage'}/>}/>
        </Route>
        <Route path="/settle" element={<Settle />} />
        <Route exact path="/" element={<Navigate to='/visit'/>}/>
        <Route path="/order" element={<Order />} />
      </Routes>
    </Suspense>
  );
}

export default App;
